<template>
  <ul class="menu-list pbm0 h100">
    <li
      v-for="(item, index) in state.aMenuList"
      v-bind:key="index"
      @click="fPageSwitch(item.router)"
      :class="[
        'cc-display',
        'h100',
        'w100p',
        'float-left',
        'white250',
        state.currentPage === item.router ? 'bc1' : '',
      ]"
    >
      <span class="fs20 fw400 ls6">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script setup>
import { defineProps, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { localStore, localData } from "/@/http/store.js";

// 父组件传递数据
const props = defineProps({
  aMenuList: Array,
  msg: Object,
});

// 路由
const { push } = useRouter();

// 本地取值
const route_ = localData("route", false);

// 双向绑定数据
const state = reactive({
  aMenuList: [
    { name: "主页", router: "" },
    { name: "试卷", router: "question" },
    { name: "题库", router: "qlib" },
    { name: "管理", router: "administration" },
  ],
  currentPage: route_ ? route_ : "",
});

// methods-菜单切换
const fPageSwitch = (route) => {
  // 本地存储当前路由地址
  localStore("route", route);
  // 选中的菜单显示
  state.currentPage = route;
  // 问题库菜单，从本地读取上次选择的问题库id
  if (route === "qlib") {
    let val = localData("qlib", false);
    return push("/" + route + "/" + (val == null ? "1" : val)); // 路由跳转
  }
  // 路由跳转
  push("/" + route);
};

// 监听父组件传值
watch(
  () => props.msg,
  (newValue) => {
    if (newValue.from === "Qlib" && newValue.code === "qlib") {
      localStore("route", "qlib");
      state.currentPage = "qlib";
    }
  }
);
</script>

<style scoped>
.menu-list li:hover {
  background-color: rgb(29, 96, 151);
  cursor: pointer;
}
</style>
